@import '~scss/variables';
@import '~scss/mixins';

.wrapper {
  position: relative;
  padding: 20px 84px 20px 24px;
  border-radius: $border-radius;
  background-color: #ffffff;
  box-shadow: 0 4px 8px 0 rgba(36, 46, 66, 0.06);
  transition: all $trans-speed ease-in-out;

  &:hover {
    box-shadow: 0 6px 16px 0 rgba(33, 43, 54, 0.2);
  }

  & + .wrapper {
    margin-top: 12px;
  }

  p {
    color: #79879c;
  }

  strong {
    color: $text-color;
  }

  :global {
    .columns {
      margin-bottom: -12px;
    }

    .column {
      display: flex;
      align-items: center;
    }

    .h6 {
      font-family: $font-family-id;
      line-height: 1.5;
    }
  }
}

.more {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}
